import React, {Component} from 'react'
import {Outlet} from 'react-router-dom';
import Header from "@/pages/Header";

class App extends Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            isFixedHead: false
        }
    }
    getScrollTop = () => {
        let scroll_top = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scroll_top = document.documentElement.scrollTop;
        }
        else if (document.body) {
            scroll_top = document.body.scrollTop;
        }
        return scroll_top;
    }

    componentDidMount(){
        let old = this.getScrollTop()
        window.addEventListener('scroll', () => {
            let top = this.getScrollTop()
            if(top > 95 && top > old){
                this.setState(Object.assign({}, this.state, {isFixedHead: true}));
            } else {
                this.setState(Object.assign({}, this.state, {isFixedHead: false}));
            }
            old = top
        })
    }

    renderBg = () => {
        const {isFixedHead} = this.state;
        if(isFixedHead){
            return <div className="head-bg"/>
        }
    }

    render(){
        return (
            <div>
                <div className={this.state.isFixedHead ? "abs-top" : ''}>
                    <Header/>
                </div>

                {this.renderBg()}
                <Outlet/>
            </div>
        )
    }
}

export default App